<template>
	<view class="admin-picture-edit-container">
		<uni-file-picker @select="select" v-model="data.imageArr" title="请放入图片" limit="1" file-mediatype="image"></uni-file-picker>
		<view class="admin-picture-edit-item">
			<view class="admin-picture-edit-label">链接URL</view>
			<input v-model="data.pictureInfo.link_url" class="admin-picture-edit-value" type="text" placeholder="链接URL"/>
		</view>
		<view class="admin-picture-edit-item">
			<view class="admin-picture-edit-label">简单介绍</view>
			<input v-model="data.pictureInfo.intro" class="admin-picture-edit-value" type="text" placeholder="简单介绍"/>
		</view>
	</view>
	<button class="admin-picture-edit-btn" @tap="changeOne">修改图片</button>
</template>

<script>
	import {reactive,onMounted} from 'vue' 
	import global from '../../config/global.js'
	import {onLoad} from '@dcloudio/uni-app'
	export default {
		name:'admin-picture-edit',
		setup(value,context){
			let data = reactive({
				pictureInfo:{
					pic_url:"",
					link_url:"",
					intro:"",
					sequence:0
				},
				imageArr:[{
					url:'',
					fileID:1
				}]
			})
			
			onLoad((e)=>{
				// console.log(JSON.parse(decodeURIComponent(e.picInfo)))
				data.pictureInfo = JSON.parse(decodeURIComponent(e.picInfo))
				data.imageArr[0].url = data.pictureInfo.pic_url;
				data.imageArr[0].fileID = 1
			})
			
			function select(e){
				// console.log(e)
				uni.uploadFile({
					url:global.BASE_URL+'/banner/upload',
					filePath:e.tempFiles[0].path,
					name:'file',
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						res=JSON.parse(res.data)
						if(res.code){
							data.pictureInfo.pic_url = res.data
						}
					},
					fail: (err)=>{
						console.log(err)
					}
				})
			}
			
			function changeOne(){
				uni.setStorageSync('changel',data.pictureInfo)
				uni.navigateBack()
			}
			
			return {
				data,
				select,
				changeOne
			}
		}
	}
</script>

<style lang="scss">
	.admin-picture-edit-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
		
		& .admin-picture-edit-item{
			margin: 15rpx 0rpx;
			padding: 5rpx;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			border-bottom: 2rpx solid #515151;
			
			& .admin-picture-edit-label{
				width: 140rpx;
				font-weight: bold;
				font-size: 30rpx;
				text-align-last: justify;
				text-align: justify;
				text-justify: distribute-all-lines;
			}
			
			& .admin-picture-edit-value{
				width: 500rpx;
				height: 70rpx;
				line-height: 70rpx;
				// padding: 5rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}
	}
	
	.admin-picture-edit-btn{
		height: 80rpx;
		line-height: 80rpx;
		width: 400rpx;
		margin: 30rpx 175rpx;
		color: white;
		background-color: #9BCDD2;
	}
</style>
